<template>
  <div>
    <div v-for="(item, index) in data" :key="index" class="gl_px_15">
      <div v-if="item.Code === 'Entry'" class="box gl_mt_15">
        <div>
          <span class="name">{{ item.Name }}</span>
          <span class="gl_pl_15">{{ formatMoney(item.UnitAmount) }} 元/人</span>
        </div>
        <div v-for="(ktem, kndex) in item.Items" :key="ktem.Id">
          <span>{{ ktem.Name }}</span>
          <span v-if="kndex !== item.Items.length - 1">，</span>
        </div>
        <van-divider />
        <div class="text_right">共 {{ item.ItemsCount }} 人，合计：{{ formatMoney(item.CategoryAmount) }} 元</div>
      </div>
      <div v-if="item.Code === 'Deposit'" class="box gl_mt_15">
        <div>
          <span class="name">{{ item.Name }}</span>
          <span class="gl_pl_15">{{ formatMoney(item.UnitAmount) }} 元/人</span>
        </div>
        <div v-for="(ktem, kndex) in item.Items" :key="ktem.Id">
          <span>{{ ktem.Name }}</span>
          <span v-if="kndex !== item.Items.length - 1">，</span>
        </div>
        <van-divider />
        <van-divider />
        <div class="text_right">共 {{ item.ItemsCount }} 人，合计：{{ formatMoney(item.CategoryAmount) }} 元</div>
      </div>
      <div v-if="item.Code === 'Custom'" class="box gl_mt_15">
        <div>
          <span class="name">{{ item.Name }}</span>
          <span class="gl_pl_15">{{ formatMoney(item.UnitAmount) }} 元/人</span>
        </div>
        <div v-for="(ktem, kndex) in item.Items" :key="ktem.Id">
          <span>{{ ktem.Name }}</span>
          <span v-if="kndex !== item.Items.length - 1">，</span>
        </div>
        <van-divider />
        <div class="text_right">共 {{ item.ItemsCount }} 人，合计：{{ formatMoney(item.CategoryAmount) }} 元</div>
      </div>
      <div v-if="item.Code === 'SimultaneousEntry'" class="box gl_mt_15">
        <div>
          <span class="name">{{ item.Name }}</span>
          <span class="gl_pl_15">{{ formatMoney(item.UnitAmount) }} 元/人</span>
        </div>
        <div v-for="(ktem, kndex) in item.Items" :key="ktem.Id">
          <span>{{ ktem.Name }}</span>
          <span v-if="kndex !== item.Items.length - 1">，</span>
        </div>
        <van-divider />
        <div class="text_right">共 {{ item.ItemsCount }} 人，合计：{{ formatMoney(item.CategoryAmount) }} 元</div>
      </div>
      <div v-if="item.Code === 'BigTeam'" class="box gl_mt_15">
        <div>
          <span class="name">{{ item.Name }}</span>
          <span class="gl_pl_15">{{ formatMoney(item.UnitAmount) }} 元</span>
        </div>
        <div v-for="ktem in item.Items" :key="ktem.Id" class="gl_mb_5">
          <div>
            <div>{{ ktem.Name }}</div>
            <div>
              <span>{{ ktem.Event.EventLongName || '' }}</span>
            </div>
          </div>
        </div>
        <van-divider />
        <div class="text_right">共 {{ item.ItemsCount }} 组，合计：{{ formatMoney(item.CategoryAmount) }} 元</div>
      </div>
      <div v-if="item.Code === 'Foot'" class="box gl_mt_15">
        <div>
          <span class="name">{{ item.Name }}</span>
          <span class="gl_pl_15">{{ formatMoney(item.UnitAmount) }} 元/人</span>
        </div>
        <div v-for="ktem in item.Items" :key="ktem.Id">
          <div>{{ ktem.Name }}</div>
          <div class="space_between">
            <div class="text">{{ ktem.NeedFootCover ? '提供脚套' : '不需要提供脚套' }}</div>
            <div class="gl_pr_15">脚码数：{{ ktem.FootSize ? ktem.FootSize : '0' }}</div>
          </div>
        </div>
        <van-divider />
        <div class="text_right">共 {{ item.ItemsCount }} 人，合计：{{ formatMoney(item.CategoryAmount) }} 元</div>
      </div>
      <div v-if="item.Code === 'Insurance'" class="box gl_mt_15">
        <div>
          <span class="name">{{ item.Name }}</span>
          <span class="gl_pl_15">{{ formatMoney(item.UnitAmount) }} 元/人</span>
        </div>
        <div v-for="ktem in item.Items" :key="ktem.Id">
          <div>{{ ktem.Name }}</div>
          <div class="text">{{ ktem.HasInsurance ? '购买保险' : '不购买保险' }}</div>
        </div>
        <van-divider />
        <div class="text_right">共 {{ item.ItemsCount }} 人，合计：{{ formatMoney(item.CategoryAmount) }} 元</div>
      </div>
    </div>
    <div class="gl_px_15">
      <div class="box gl_mt_15">
        <p class="name">订单详情</p>
        <div class="text">
          <p>
            <span>订单号：</span>
            <span>{{ orderData.orderNo }}</span>
          </p>
          <p>
            <span>下单时间：</span>
            <span>{{ orderData.orderDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
          </p>
          <p>
            <span>支付渠道：</span>
            <span v-if="orderData.isOnlinePayment">线上</span>
            <span v-else>线下</span>
          </p>
          <p>
            <span>支付方式：</span>
            <span v-if="orderData.channelTypeCode">
              <template v-for="ktem in dict.channelType">
                {{ ktem.code === orderData.channelTypeCode ? ktem.value : '' }}
              </template>
            </span>
          </p>
          <p>
            <span>订单状态：</span>
            <span v-if="orderData.orderStatusCode">
              <template v-for="ktem in dict.orderStatus">
                {{ ktem.code === orderData.orderStatusCode ? ktem.value: '' }}
              </template>
            </span>
          </p>
        </div>
      </div>
      <div v-if="!orderData.isOnlinePayment" class="box gl_mt_15">
        <p class="name">收款方</p>
        <div class="text">
          <p>
            <span>收款方：</span>
            <span>{{ orderData.offlineBeneficiarysName ? orderData.offlineBeneficiarysName : '- -' }}</span>
          </p>
          <p>
            <span>收款账号：</span>
            <span>{{ orderData.offlineAccountNumber ? orderData.offlineAccountNumber : '- -' }}</span>
          </p>
          <p>
            <span>收款银行：</span>
            <span>{{ orderData.offlineAccountsWithBank ? orderData.offlineAccountsWithBank : '- -' }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  name: 'Cost',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    orderData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  border: 1px solid #ebedf0;
  border-radius: 5px;
  padding: 10px;
  font-size: 12px;
  line-height: 22px;
  color: #666666;
}
.name {
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  font-weight: 600;
}
.number {
  height:20px;
  width:20px;
  display: inline-block;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  background: #fff;
  border: 1px solid #000;
}
.van-divider {
  margin: 10px 0;
}
.text_right{
  text-align: right;
}
.inline_block{
  display: inline-block;
  line-height: 22px;
  vertical-align: middle;
}
.text {
  color: #969799;
  font-size: 12px;
}
.space_between {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
